<template>
  <el-dialog v-model="buLineVisible" title="布线" width="1000">
    <div class="bu-line-header">
      <el-input v-model="ziDaoNum" placeholder="请输入" class="input">
        <template #prepend>子导线</template>
        <template #append>根</template>
      </el-input>
      <el-input v-model="xiangNum" placeholder="请输入" class="input">
        <template #prepend>相数</template>
        <template #append>相</template>
      </el-input>
    </div>

    <div ref="buLineDivRef" class="line-div">
      <!-- 铁塔布线canvas -->
      <div class="overflow-y-auto">
        <LineCanvas :config="config" />
        <LineSvg :config="config" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import useConfigStore from '@/states/useConfigStore'
import { computed, ref } from 'vue'
import LineCanvas from '../LineCanvas/LineCanvas.vue'
import LineSvg from '../LineSvg.vue'

const buLineVisible = defineModel()
const buLineDivRef = ref<HTMLDivElement>()
const configStore = useConfigStore()
const config = computed(() => {
  const height = Math.max(700, buLineDivRef.value?.clientHeight!)
  return {
    ...configStore.config!,
    width: configStore.config?.width!,
    height,
  }
})

// 子导线数量
const ziDaoNum = ref(2)
const xiangNum = ref(3)
</script>

<style scoped lang="scss">
.bu-line-header {
  @apply flex gap-2 justify-end items-center mb-4;
  .input {
    @apply w-[180px];
  }
}
.line-div {
  @apply w-full h-full bg-yellow-300;
}
</style>
